<template>
  <div>
    <el-drawer
      title="合同信息"
      :visible.sync="visible"
      :before-close="handleClose"
      size="70%"
    >
      <div id="loading-wrap" style="padding: 0 24px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>合同图片</span>
          </div>
          <div class="images">
            <el-image v-for="(item, index) in images" :key="index" :src="item.url" style="width: 100px; height: 100px" :preview-src-list="srcList">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>面签视频</span>
          </div>
          <div class="images">
            <video v-for="(item, index) in videos" :key="index" controls style="width: 300px; height: 200px">
              <source :src="item" type="video/mp4">
            </video>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>合同文件</span>
          </div>
          <div>
            <!-- <el-link v-if="row['type'] == '文件'" target="_blank" :href="row[item]" type="primary" :underline="false">点击查看文件</el-link> -->
            <el-link type="primary" :href="info.signContract" target="_blank">{{ info.signContract }}</el-link>

          </div>
        </el-card>
        <el-form ref="form" :model="form" label-position="top">
          <el-form-item label="状态" prop="status" :rules="{ required: true, message: '请选择状态'}">
            <el-select v-model="form.status" placeholder="请选择" style="width: 100%;" clearable size="small">
              <el-option
                v-for="item in statusOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="备注" prop="remark" :rules="{required: true, message: '备注不能为空'}">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>

          <el-form-item>
            <div class="footer-btn">
              <el-button type="primary" :loading="loading" @click="onSubmitPerson(form, 'informationReview')">保存</el-button>
              <el-button @click="handleClose">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import request from '@/utils/request'
import imageBox from './imageBox.vue'
import VideoBox from '@/components/VideoBox/index'
export default {
  components: {
    // imageBox,
    VideoBox
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: 'first',
      loadingState: {},
      images: [],
      videos: [],
      info: {},
      srcList: [],
      form: {},
      loading: false,
      statusOption: [{ label: '通过', value: 1 }, { label: '驳回', value: 0 }]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        } else {
          this.images = []
          this.videos = []
          this.info = {}
          this.srcList = []
        }
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    onSubmitPerson() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const params = { ...this.form, id: this.info.id }
          this.loading = true
          request({ url: 'system/dataReview/contractReview', params: params }).then(res => {
            this.$message({
              message: '审核成功',
              type: 'success'
            })
            this.$refs.form.resetFields()
            this.$emit('add-success')
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleClose() {
      this.$emit('handleClose')
    },
    getInfo(id) {
      request({ url: 'system/contract/' + id, method: 'get' }).then(res => {
        if (res.data) {
          const data = res.data
          if (data.image) {
            this.images = JSON.parse(data.image)
            this.srcList = this.images.map(item => item.url)
          }
          if (data.video) {
            this.videos = JSON.parse(data.video)
          }
          this.info = data
        } else {
          this.info = {}
        }
      }).finally(() => {
        this.loadingState.close()
      })
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap'
      })
      this.loadingState = loading
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: rgb(246, 247, 250);
}

.box-card {
  margin-bottom: 30px;
}

.images {
  display: flex;
  gap: 30px
}
</style>
